<template>
  <!-- 左侧部分：集团内优秀报告参考 -->
  <div class="ni">
    <div class="lt">
      <a-col class="custom-col">
        <a-card title="集团内优秀报告参考" bordered class="custom-card">
          <a-table :columns="leftColumns" :data-source="leftData" rowKey="id">
            <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'link'">
                <a> 链接 </a>
                <a>下载</a>
              </template>
            </template>
          </a-table>
        </a-card>
      </a-col>

      <!-- 右侧部分：第三方优秀报告参考 -->
      <a-col :span="31" class="custom-col">
        <a-card title="第三方优秀报告参考" bordered class="custom-card">
          <a-table :columns="rightColumns" :data-source="rightData" rowKey="id">
            <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'link'">
                <a @click="pf(record.link)"> 链接 </a>
                <a>下载</a>
              </template>
            </template>
          </a-table>
        </a-card>
      </a-col>
    </div>
    <a-card class="pd">
      <!-- <div ref="pdfContainer"></div> -->
      <iframe :src="pdfUrl"></iframe>
    </a-card>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
// import { ARow, ACol, ACard, ATable } from 'ant-design-vue';
const pdfUrl = ref("");
const pdfContainer = ref(null);
// 模拟数据
const leftData = ref([
  {
    id: 1,
    company: "公司A",
    report: "报告A",
    passTime: "2024-09-01",
    downloads: 100,
    link: "http://example.com/a",
  },
  {
    id: 2,
    company: "公司B",
    report: "报告B",
    passTime: "2024-09-02",
    downloads: 150,
    link: "http://example.com/b",
  },
]);

const rightData = ref([
  {
    id: 1,
    company: "腾讯",
    report: "腾讯2023ESG报告",
    publishTime: "2023",
    downloads: 200,
    link:
      "https://static.www.tencent.com/uploads/2024/05/29/64c2c411b5694a79bbd8ef4db73d6e57.pdf",
  },
  {
    id: 2,
    company: "公司D",
    report: "报告D",
    publishTime: "2024-09-12",
    downloads: 250,
    link: "http://example.com/d",
  },
]);

// 列定义
const leftColumns = [
  { title: "序号", dataIndex: "id", key: "id", width: 70, align: "center" },
  { title: "公司名", dataIndex: "company", key: "company", align: "center" },
  { title: "报告名", dataIndex: "report", key: "report", align: "center" },
  { title: "通过时间", dataIndex: "passTime", key: "passTime", align: "center" },
  {
    title: "下载次数",
    dataIndex: "downloads",
    key: "downloads",
    width: 100,
    align: "center",
  },
  {
    title: "操作",
    dataIndex: "link",
    key: "link",
    align: "center",
  },
];

const rightColumns = [
  { title: "序号", dataIndex: "id", key: "id", align: "center", width: 80 },
  { title: "公司名", dataIndex: "company", key: "company", align: "center" },
  { title: "报告名", dataIndex: "report", key: "report", align: "center" },
  { title: "发布时间", dataIndex: "publishTime", key: "publishTime", align: "center" },
  {
    title: "下载次数",
    dataIndex: "downloads",
    key: "downloads",
    align: "center",
    width: 90,
  },
  {
    title: "操作",
    dataIndex: "link",
    key: "link",
    align: "center",
  },
];
const url = ref("");
const pf = (lin) => {
  console.log(lin);
  pdfUrl.value = lin;
};
onMounted(() => {
  if (!pdfUrl.value) {
    return;
  } else {
    const pdfViewer = new pdfjs.PDFViewer({
      container: pdfContainer.value,
    });
    pdfjs.getDocument(pdfUrl).promise.then((pdf) => {
      pdfViewer.setDocument(pdf);
    });
  }
});
</script>

<style scoped>
.custom-row {
  margin: 0 -8px; /* 为了让列的外边距合适 */
}

.custom-col {
  padding: 0 8px; /* 列的内边距 */
}

.custom-card {
  margin-bottom: 16px; /* 卡片底部的间距 */
}

.custom-card .ant-card-body {
  padding: 0; /* 卡片内容区域的内边距 */
}

.ant-table {
  margin: 0; /* 表格外边距 */
}

.ant-table-thead > tr > th {
  background: #f0f2f5; /* 表头背景色 */
}

.ant-table-tbody > tr > td {
  padding: 12px; /* 单元格内边距 */
}

.ant-table-cell a {
  color: #1890ff; /* 链接颜色 */
}

.ant-table-cell a:hover {
  text-decoration: underline; /* 鼠标悬停时链接下划线 */
}
.pd {
  width: 50%;
  height: 80vh;
  iframe {
    width: 100%;
    height: 75vh;
  }
}

.ni {
  display: flex;
  width: 100%;
  justify-content: space-between;
  .lt {
    width: 50%;
  }
}
</style>
